<template>
  <div class="app-page">
    <div class="app-page-toolbar">
      <div class="app-page-toolbar__filter">
        <el-input v-model="list.filter.search" placeholder="请输入内容" />
        <div style="display: flex;">
          <el-button type="primary" @click="listGet">查询</el-button>
          <el-button @click="resetFilter">重置</el-button>
        </div>
      </div>
      <div class="app-page-toolbar__action">
        <el-button @click="$router.go(-1)">返回</el-button>
      </div>
    </div>
    <div class="app-page-table">
      <el-table v-loading="list.loading" :data="list.data" border style="width: 100%" height="100%" show-overflow-tooltip>
        <el-table-column type="index" label="序号" width="80" align="center" />
        <el-table-column prop="quesion_id" label="问题ID" width="120">
          <template #default="{ row }">
            <a-link :link="`https://www.zhihu.com/question/${row.question_id}`">
              #{{ row.question_id }}
            </a-link>
          </template>
        </el-table-column>
        <el-table-column prop="obj_id" label="对象ID" min-width="100" align="center" />
        <el-table-column prop="notify_type" label="触发行为" min-width="100" align="center">
          <template #default="{ row }">
            <el-tag
              :type="notify_type_types[row.notify_type]"
              effect="dark">
              {{ notify_types[row.notify_type] }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="问题来源" min-width="100" align="center">
          <template #default="{ row }">
            <el-tag
              :type="notify_origin_types[row.notify_origin]"
              effect="dark">
              {{ notify_origins[row.notify_origin] }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="邮件接收者" min-width="100" align="center">
          <template #default="{ row }">
            {{ row.notify_emails.join('、') }}
          </template>
        </el-table-column>
        <el-table-column prop="createdAt" label="创建时间" min-width="100" align="center">
          <template #default="{ row }">
            {{ useTimeFromNow(row.createdAt) }}
          </template>
        </el-table-column>
        <el-table-column prop="updatedAt" label="更新时间" min-width="100" align="center">
          <template #default="{ row }">
            {{ useTimeFromNow(row.updatedAt) }}
          </template>
        </el-table-column>
        <el-table-column label="操作" width="150" align="center"  fixed="right">
          <template #default="{ row }">
            <el-button type="danger" @click="handleDelete(row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="app-page-pagination">
      <el-pagination
        background
        layout="total, prev, pager, next"
        :page-size="list.size"
        :current-page="list.page"
        :total="list.total"
        @current-change="handlePageChange"/>
    </div>
    <receiver-dialog v-if="visible" v-model="visible" :detail="item" :author_type="'answer'" @submit="listGet"></receiver-dialog>
  </div>
</template>
<script lang="ts" setup>
import { reactive, ref, type Ref } from 'vue';
import ReceiverDialog from './ReceiverDialog.vue';
import { useConfirm, useMessage, useTimeFromNow } from '@/utils/utils';
import http from '@/utils/http'
import type { AuthorInter, ReceiverInter } from '@/typings/interface';
import aLink from '@/components/a-link.vue';

const notify_types: any = reactive({ publisher: '题主发布问题', answer: '答主关注/回答问题', question: '问题变成红包'  })
const notify_type_types: any = reactive({ publisher: 'primary', answer: 'info', question: 'danger'  })
const notify_origins: any = reactive({ publish: '题主发布', answer: '答主回答', follow: '答主关注', platform: '平台收录'  })
const notify_origin_types: any = reactive({ publish: 'primary', answer: 'info', follow: 'warning', platform: 'success'  })

const visible = ref(false)
const item: Ref<ReceiverInter | null> = ref(null)
const list = reactive({
  page: 1,
  size: 10,
  total: 0,
  loading: true,
  filter: {
    search: ''
  },
  data: []
})

// 获取列表
function listGet () {
  list.loading = true
  http('/author/notify/list', {
    page: list.page,
    size: list.size,
    ...list.filter
  }).then((res: any) => {
    const { total, items } = res.data
    list.total = total
    list.data = items
    list.loading = false
  })
}
listGet()
// 重置筛选
function resetFilter () {
  list.filter.search = ''
  listGet()
}
// 监听页码改变
function handlePageChange (value: number) {
  list.page = value
  listGet()
}
// 删除
function handleDelete (row: AuthorInter) {
  useConfirm('确定删除该条记录吗?').then(() => {
    http('/author/notify/delete', {
      id: row.id
    }).then(res => {
      useMessage('删除成功')
      listGet()
    })
  })
}
</script>
<style lang="scss">
</style>